import React from 'react';
import { Animated, Easing, Dimensions } from 'react-native';
import styled from 'styled-components';

const initial_left = new Animated.Value(
  Dimensions.get('window').width / 2 - 85
);
const initial_top = new Animated.Value(
  Dimensions.get('window').height / 2 - 85
);

class Login extends React.Component {
  state = {
    halfSreenHeight: Dimensions.get('window').height / 2 - 82,
    halfSreenWidth: Dimensions.get('window').width / 2 - 88,
    back_leftAnim: initial_left,
    back_topAnim: initial_top,
    center_leftAnim: initial_left,
    center_topAnim: initial_top,
    top_leftAnim: initial_left,
    top_topAnim: initial_top
  };

  componentDidMount() {
    this.loopAgain();
  }

  animatedConfig = (left, top) => {
    const { halfSreenWidth, halfSreenHeight } = this.state;
    Animated.spring(left, {
      toValue: halfSreenWidth,
      easing: Easing.back(),
      duration: 500
    }).start();
    Animated.spring(top, {
      toValue: halfSreenHeight,
      easing: Easing.back(),
      duration: 500
    }).start();
  };

  loopAgain = () => {
    // back
    const { top_leftAnim, top_topAnim } = this.state;
    this.animatedConfig(top_leftAnim, top_topAnim);
    setTimeout(() => {
      this.loop();
    }, 160);
  };

  loopConfig = (left, top, size) => {
    Animated.spring(left, {
      toValue: this.state.halfSreenWidth - size,
      easing: Easing.back(),
      duration: 500
    }).start();
    Animated.spring(top, {
      toValue: this.state.halfSreenHeight - size,
      easing: Easing.back(),
      duration: 500
    }).start();
  };

  loop = () => {
    // back
    const { top_leftAnim, top_topAnim } = this.state;
    this.loopConfig(top_leftAnim, top_topAnim, 4);

    setTimeout(() => {
      this.loopAgain();
    }, 160);
  };

  render() {
    const { top_leftAnim, top_topAnim } = this.state;
    return (
      <Contaienr>
        <AnimatedTop style={{ left: top_leftAnim, right: top_topAnim }} />
        <White>
          <Icon source={require('../../../assets/alarm/alarm.png')} />
          <Title>正在报警</Title>
        </White>
      </Contaienr>
    );
  }
}

export default Login;

const Contaienr = styled.View`
  background: white;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
`;
const Icon = styled.Image`
  width: 44;
  height: 45.67;
`;
const Title = styled.Text`
  color: #fe6956;
  margin-top: 5;
`;
const White = styled.View`
  position: absolute;
  width: 145;
  height: 145;
  border-radius: 120;
  background-color: white;
  color: #fe6956;
  justify-content: center;
  align-items: center;
`;
const Top = styled.View`
  position: absolute;
  width: 155;
  height: 150;
  border-radius: 180;
  background-color: #f75846;
  opacity: 0.5;
`;
const AnimatedTop = Animated.createAnimatedComponent(Top);
